<template>
    <svg class="text-svg" v-if="showNames.length > 0">
        <text :style="style" :x="x" :y="y" :fill="fill">
          <template v-for="(name, index) in showNames" :key="index">
            <template v-if="nameToDate[name]">
              <TextSpanSingle
                :vitalsignsvalues="nameToValue[name]"
                :value="nameToValue[name]"
                :date="nameToDate[name]"
                :name="name"
              />
              <span v-if="index < showNames.length - 1">/</span>
            </template>
          </template>
        </text>
    </svg>
    
    <TextSvgSingle :config="config" v-else/>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  import TextSvgSingle from './TextSvgSingle.vue';
  import TextSpanSingle from './TextSpanSingle.vue';
  
  const props = defineProps({
    config: Object,
  });
  
  const showNames = computed(() => {
    console.log("showNames",props.config.names);
    if (props.config.names) {
      return props.config.names.filter(name => !!props.config.nameToDate[name]);
    }
    return [];
  });
  </script>